<template>
  <div class="app-container flex column">
    <top-title :policeView="true" :cusString="cusString"></top-title>
    <div class="content-wrap f1 flex column">
      <!-- 搜索栏 -->
      <div class="search-group">
        <div class="input-wrap">
          <div class="label">机关名称:</div>
          <div class="input-item">
            <a-input placeholder="请输入机关名称" v-model="input" />
          </div>
        </div>

        <div class="btn-wrap">
          <a-button class="searchBtn" @click="search()" type="primary"> 搜索 </a-button>
          <a-button class="resetBtn" @click="reset()" type="primary"> 重置 </a-button>
        </div>

        <div class="btn-group">
          <a-button class="exportBtn" type="primary" @click="exportExcel"> 导出Excel </a-button>
        </div>
      </div>

      <div class="table-wrap f1">
        <a-table
          bordered
          rowKey="id"
          id="a-table"
          class="tableList"
          :pagination="false"
          :columns="columns"
          :dataSource="dataSource"
        >
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import fs from 'file-saver'
import topTitle from '@/components/topTitle'
import startEndTime from '@/components/startEndTime'
export default {
  name: 'policeInspector',
  components: { topTitle, startEndTime },
  data() {
    return {
      input: '',
      columns: [],
      cusString: '',
      dataSource: [],
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.columns = window.cusColumn
      this.cusString = window.cusString
      setTimeout(() => {
        this.dataSource = window.dataSource
      }, (Math.random() + 0.1) * 2000)
    },

    search() {
      this.dataSource = this.dataSource.filter((item) => {
        return item.police_station_name.includes(this.input)
      })
    },

    reset() {
      this.input = ''
      this.dataSource = []
      setTimeout(() => {
        this.dataSource = window.dataSource
      }, (Math.random() + 0.1) * 2000)
    },

    // 导出当前页
    exportExcel() {
      const wb = XLSX.utils.table_to_book(document.querySelector('#a-table'))

      const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      })
      try {
        fs.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${this.cusString}.xlsx`)
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
    },
  },
  destroy() {},
}
</script>

<style scoped lang="less">
/deep/ .ant-table-body {
  border: 1px solid #0a5297 !important;
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    border: 1px solid #0a5297 !important;
  }
}

/deep/ .ant-table-row-cell-break-word:hover {
  background: #1388ff !important;
  cursor: pointer;
}

/deep/ .ant-table-bordered .ant-table-header > table,
.ant-table-bordered .ant-table-body > table,
.ant-table-bordered .ant-table-fixed-left table,
.ant-table-bordered .ant-table-fixed-right table {
  border: 1px solid #0a5297 !important;
}
/deep/ .ant-table-fixed .ant-table-thead > tr > th {
  color: #719bbc;
  border: 1px solid #0a5297 !important;
}
/deep/ .ant-table-header {
  background: var(--theme-content-bg);
}

/deep/ .ant-table-hide-scrollbar {
  overflow: auto !important;
}

/deep/ .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
  background: #0a5297;
}

.refreshData {
  width: 60px;
  height: 30px;
  font-size: 16px;
  color: #0e2b48;
  background: #1388ff;
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  right: 0px;
  // cursor: pointer;
}

.app-container {
  background: var(--theme-content-bg);
  padding-top: 0;
  padding-bottom: 0;
  .content-wrap {
    background: var(--theme-container-bg);
    overflow: hidden;
    .table-wrap {
      padding: 0 20px;
      overflow: auto;
    }
  }
}
</style>
